<template>
  <div>
    <div>{{ titleObj.title }}-111</div>
    <!-- {{$attrs.msg}} -->
    <div>我是孙子组件-{{ $attrs.age }}-{{ $attrs }}</div>
    <button @click="emits('gather', '我是孙子组件传过来的')">孙子按钮</button>
    <button @click="handleTitle">修改inject</button>
  </div>
</template>
<script>
/*template中没有根元素的时候，script中也没有inheritAttrs: false，
标签中的元素也没有v-bind="$attrs"，标签的元素中也没有{{$attrs.xxx}}，
defineProps中没有全部$attrs中的属性，会报Vue warn警告，消除警告的办法是要么加上根元素，
要么script中加上inheritAttrs: false,要么在template中标签中加上v-bind="$attrs",
要么在元素中加上{{$attrs.xxx}},要么defineProps中有全部$attrs中的属性,必须是全部$attrs中的属性,不然还是报警告*/
// export default {
//   inheritAttrs: false,
// };
//vue3 组件传值之 props 与 attrs 的相同点和不同点
//相同点
//1.props和attrs中的属性可以获取对应的值，属性不能被赋值(否则报错 xxx is readonly,因为vue是单向数据流,单向数据流优势是数据流清晰,出错方便调试，双向数据流在实际操作中很难发现到底是哪个子组件修改了props的值)
//2.props和attrs中的属性值如果是普通类型的值，想要修改的话必须向父组件发送事件通过父组件修改
//3.props和attrs中的属性值如果是对象或数组，那么对象或数组内部的值是可以在子组件中被修改的(也推荐这样做,简单方便,也可以向父组件发送事件通过父组件修改,个人感觉通过父组件麻烦一点)
//不同点
// 1、props 要先声明才能取值，attrs 不用先声明
// 2、props 声明过的属性，attrs 里不会再出现
// 3、props 不包含事件，attrs 包含
// 4、props 支持 string 以外的类型，attrs 只有 string 类型
</script>
<script setup>
import { inject } from "vue";
// defineOptions({
//   inheritAttrs: false,
// })
const props = defineProps({
  name: String,
  msg: String,
  rfd: Number,
  poten: {
    type: Array,
    default() {
      return [];
    },
  },
});
const emits = defineEmits(["gather"]);
const titleObj = inject("title", "默认值"); //第二个参数是默认值，没有提供provide就会显示默认值
setTimeout(() => {
  titleObj.updatetitle("我要修改传递过来的title值");
}, 3000);
console.log(titleObj, titleObj.title, "titleObj"); //打印出爷爷组件传过来的值
const handleTitle = () => {
  titleObj.title.value = "我是孙子组件传过来的"; //会报警告因为title是一个readonly只读的
};
</script>

<style scoped>
.yerr {
  color: yellow;
}
</style>
